<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box {
            width: 400px;
            height: 400px;
            border: 10px dashed green;
            background-color: red;
            /* 边框圆角半径 */
            border-radius: 210px;
            text-align: center;
        }
    </style>
</head>

<body>

<div id="box">我很圆</div>
<script>
    var circle = document.getElementById("box");
    // 鼠标按下
    circle.onmousedown = function () {
        circle.style.backgroundColor = 'yellow'
    }
    // 鼠标抬起来
    circle.onmouseup = function () {
        circle.style.backgroundColor = 'red'
    }
    // 鼠标滑过 => 从外部滑动到内部
    circle.onmouseover = function () {
        circle.style.backgroundColor = 'green';
        circle.style.borderColor = 'red'
    }
    // 鼠标从内部滑动到外部
    circle.onmouseout = function () {
        circle.style.backgroundColor = 'red';
        circle.style.borderColor = 'green'
    }
    circle.onmousemove = function () {
        /*
        都可以像html标签添加文本
        区别:innerHTML中可以添加html代码,例如p标签会被渲染出来
        innerText只能添加文本标签,标签也会当做普通文本信息显示出来
         */
        circle.innerHTML = '<p>a</p>'
        //circle.innerText='<p>a</p>'
        console.log("move")
    }
</script>

</body>
</html>